<template>
    <div class="modal" data-keyboard="false" data-backdrop="static" id="give-permission-model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">分配权限</h4>
                </div>
                <div class="modal-body">
                    <div class="tree tree-solid-line">
                        <div>
                            <give-permission-tree :permissions="permissions" :myPermissions="myPermissions"></give-permission-tree>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" v-on:click="sp">提交</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['name', 'title'],
        mounted() {
            // 设置模态框高度样式
            $("#give-permission-model .modal-body").height(document.documentElement.clientHeight - 200).css('overflow-y', 'auto');
        },
        data(){
            return {
                permissions: [],
                myPermissions: [],
            }
        },
        methods: {
            // 设置分配权限
            sp(){
                let permissions = [];
                $(".tree i").each(function(index, el) {
                    if($(el).hasClass('fa-check-square-o')){
                        permissions.push(el.id);
                    }
                });

                this.post(this.url, { permissions }).then(response => {
                    $("#give-permission-model").modal('hide');
                    this.alert(this.title + '权限分配成功');
                });


            },
            gp(id){
                this.url = this.name + '/' + id + '/give_permission';
                this.permissions = [];
                this.myPermissions = [];
                this.get(this.url).then(response => {
                    this.permissions = this.treeChildren(response.permissions);
                    this.myPermissions = response.myPermissions;
                    $("#give-permission-model").modal('show');
                });
            },
        }
    }
</script>